<template>
  <view class="warp">
    <h1>请选择你的年级</h1>
  </view>
  <view class="garde">
    <h2>小学</h2>
    <uni-grid :column="3" :showBorder="false" :square="false">
      <uni-grid-item>
        <button type="button" @tap="nianji('1')">一年级</button>
      </uni-grid-item>
      <uni-grid-item>
        <button type="button" @tap="nianji('1')">二年级</button>
      </uni-grid-item>
      <uni-grid-item>
        <button type="button" @tap="nianji('1')">三年级</button>
      </uni-grid-item>
      <uni-grid-item>
        <button type="button" @tap="nianji('1')">四年级</button>
      </uni-grid-item>
      <uni-grid-item>
        <button type="button" @tap="nianji('1')">五年级</button>
      </uni-grid-item>
      <uni-grid-item>
        <button type="button" @tap="nianji('1')">六年级</button>
      </uni-grid-item>
    </uni-grid>
  </view>
  <view class="garde">
    <h2>初中</h2>
    <uni-grid :column="3" :showBorder="false" :square="false">
      <uni-grid-item>
        <button type="button" @tap="nianji('2')">七年级</button>
      </uni-grid-item>
      <uni-grid-item>
        <button type="button" @tap="nianji('2')">八年级</button>
      </uni-grid-item>
      <uni-grid-item>
        <button type="button" @tap="nianji('2')">九年级</button>
      </uni-grid-item>
    </uni-grid>
  </view>
  <view class="garde">
    <h2>高中</h2>
    <uni-grid :column="3" :showBorder="false" :square="false">
      <uni-grid-item>
        <button type="button" @tap="nianji('3')">高一</button>
      </uni-grid-item>
      <uni-grid-item>
        <button type="button" @tap="nianji('3')">高二</button>
      </uni-grid-item>
      <uni-grid-item>
        <button type="button" @tap="nianji('3')">高三</button>
      </uni-grid-item>
    </uni-grid>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { myStore, ShouyeStore } from '@/stores'
const nianji1 = ShouyeStore()
import { onLoad, onShow } from '@dcloudio/uni-app'
const nianji = (a) => {
  //  点击这个判断是否确认
  uni.showModal({
    title: '选择年级',
    content: '确定选择这个吗',
    success: function (res) {
      console.log(a, '这个是什么')

      if (res.confirm) {
        // 存储本地的年级参数
        nianji1.setnianji(a)
        uni.reLaunch({
          url: '../../pages/index/index?nianji=' + a,
        })
        console.log('用户点击确定')
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    },
  })
}
</script>

<style>
.warp {
  margin-left: 30rpx;
}
.garde {
  margin-top: 30rpx;
  margin-left: 30rpx;
}
button {
  width: 200rpx;
  height: 100rpx;
  margin-top: 30rpx;
  font-size: 40rpx;
}
button:hover {
  background-color: #008cba;
  color: white;
}
</style>
